<!-- 猜你喜欢组件 -->
<template>
  <view class="goods_box">
    <uni-grid :column="2" :highlight="true" :showBorder="false">
      <uni-grid-item
        :style="
          index % 2 == 0
            ? 'padding: 0px 5px 10px 0px; width: 50%; height: 100%; '
            : 'padding: 0px 0px 10px 5px; width: 50%; height: 100%; '
        "
        v-for="(goods, index) in goodsList"
        :key="index"
      >
        <view class="goods">
          <view class="goods_img bg_stamp">
            <image :src="goods.image" />
          </view>
          <view class="goods_info">
            <view class="goods_name">{{ goods.name }}</view>
            <view class="goods_row">
              <view class="goods_price">
                ￥<text class="goods_price-int">{{ price(goods.price) }}</text
                >{{ decimal(goods.price) }}
              </view>
              <view class="goods_comment">{{ comment(goods.commentNum) }}</view>
            </view>
          </view>
        </view>
      </uni-grid-item>
    </uni-grid>
  </view>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { SkuModel } from '@/services/model/goodsModel';
  import { isEmpty } from '@/utils/is';
  import { comment } from '@/utils/common';
  import { onShow } from '@dcloudio/uni-app';
  import { guessLike } from '@/services/api/goods/goods';
  import { PageParam } from '@/services/model/baseModel';

  const props = defineProps({
    // home my
    type: {
      type: String,
      default: () => 'home',
    },
  });

  const goodsList = ref<Array<SkuModel>>([]);
  const pageParam = reactive<PageParam>({
    pageNum: 1,
    pageSize: 20,
    params: props.type,
  });

  /**
   * 加载数据
   * @param pageNum 页码
   */
  const getGuessData = (pageNum: number) => {
    console.log('======猜您喜欢======');
    pageParam.pageNum = pageNum ? pageNum : ++pageParam.pageNum;
    guessLike(pageParam).then(({ data }) => {
      if (pageParam.pageNum == 1) {
        goodsList.value = data.data;
      } else {
        goodsList.value.push(...data.data);
      }
    });
  };

  onShow(() => {
    getGuessData(1);
  });

  /**
   * 价格的整数
   * @param num 价格
   */
  const price = (num: any) => {
    if (isEmpty(num)) {
      return '';
    }
    return parseInt(num / 100 + '');
  };

  /**
   * 价格的小数
   * @param num 价格
   */
  const decimal = (num: any) => {
    if (isEmpty(num)) {
      return '';
    }
    return '.' + (num % 100 == 0 ? '00' : num % 100);
  };

  defineExpose({
    getGuessData,
  });
</script>

<style lang="scss">
  .goods_box {
    width: 100%;
    position: relative;
    box-sizing: border-box;
  }

  .goods {
    display: block;
    width: 100%;
    background: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;
    position: relative;

    .goods_img {
      margin-bottom: 20rpx;
      position: relative;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      overflow: hidden;

      image {
        width: 100%;
        height: 400rpx;
      }
    }

    .bg_stamp {
      background: #fff
        url(https://img10.360buyimg.com/wq/jfs/t24601/190/890984006/4559/731564fc/5b7f9b7bN3ccd29ab.png);
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: 350rpx;
    }

    .goods_info {
      padding: 0 20rpx 20rpx;

      .goods_name {
        text-align: left;
        line-height: 40rpx;
        height: 82rpx;
        font-size: 28rpx;
        font-family: -apple-system, Helvetica, sans-serif;
        overflow: hidden;
        color: #434343;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        word-break: break-all;
        -webkit-box-orient: vertical;
      }

      .goods_row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        height: 60rpx;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: space-between;
        overflow: hidden;

        .goods_price {
          font-style: normal;
          font-family: JDZH-Regular, sans-serif;
          display: inline-block;
          font-size: 28rpx;
          line-height: 60rpx;
          color: #ff4142;

          .goods_price-int {
            font-size: 36rpx;
            font-style: normal;
          }
        }

        .goods_comment {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
</style>
